import style from '../assets/css/flights.module.css'
import { NavBar,DatePicker,Toast  } from 'antd-mobile/2x'
import { useHistory } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import dayjs from 'dayjs'
import $api from '../api'

const Flights = () => {
    const history = useHistory();

    // 从redux中读取 出发城市和到达城市
    const st = useSelector(state => state);

    // 日期选择
    const [sDate, setSDate] = useState(dayjs());
    const [visible, setVisible] = useState(false);

    // 线路信息
    const [flights, setFlights] = useState([]);
    
    // 前一天（使用dayjs）
    const preDay = () => {
        setSDate(sDate.subtract(1, 'day'))
    };

    // 后一天
    const nextDay = () => {
        setSDate(sDate.add(1, 'day'))
    };

    useEffect(() => {
        getFlightList();
    }, []);

    // 获取航线信息
    const getFlightList = async () => {
        if (!st.startCity || !st.arriveCity) {
            Toast.show({
                content: '请正确选择开始城市和到达城市',
            });
            
            return setTimeout(() => {
                history.goBack();
            }, 1000);
        };
        const res = await $api.post('/flight/getAll', {
            startCity: st.startCity,
            arriveCity: st.arriveCity,
        });
        const { data, success } = res.data;
        if (!success) return Toast.show({ content: '获取出错', });
        setFlights(data);
    }
    
    return(
        <div className={style.main}>
            <NavBar onBack={() => history.goBack()}>班次选择</NavBar>
            {/* 日期选择 */}
            <div className={style.date}>
                <div onClick={()=>preDay()}>前一天</div>
                <div onClick={() => setVisible(true)}><i className='iconfont icon-rili'></i>{sDate.format('YYYY-MM-DD')}</div>
                {/* 日期选择器 */}
                    <DatePicker
                        title='时间选择'
                        visible={visible}
                        onClose={() => {
                        setVisible(false)
                        }}
                        min={new Date()}
                        defaultValue={sDate.$d}
                        onConfirm={val => {
                            setSDate(dayjs(val))
                        }}
                />
                {/*  */}
                <div onClick={()=>nextDay()}>后一天</div>
            </div>

            {/* 列表  */}
            <div className={style.ct}>
                {flights.map(item =>( 
                   <div className={style.fbox} key={item._id}>
                    {/* 时间 票价 */}
                    <div className={style.ft}>
                        <div className={style.ftime}>{item.startTime.slice(0,5)}</div>
                        <div className={style.fprice}>{item.ticketPrice/100}元</div>
                    </div>
                    {/* 站点 */}
                    <div className={style.fstation}>
                        <div className={style.fs}>
                            {item.startCity}
                        </div>
                        <div className={style.fe}>
                            {item.arriveCity}
                        </div>
                    </div>
                    {/* 票量 */}
                     <div className={style.fb}>
                        <div>
                            余票充足
                        </div>
                            <div className={style.fbbt}
                                // 跳转到订单页面并传入id 和 车票发车时间
                                onClick={() => {
                                    history.push({
                                        pathname: '/Order',
                                         search:'id='+item._id + '&date='+sDate.format("MM-DD"),
                                    })
                                
                            }}>
                            选择班车
                        </div>
                    </div>
                </div> 
                ))}
                
                
            </div>
            
        </div>
    )
}
export default Flights